<template>
  <div style="padding-top: 20px;">
    <div style=" width: 1200px;height: 500px; margin: 0 auto; background: #fff;padding: 20px;">
      <h2>标题：</h2>
      <Input v-model="nvalue" placeholder="请输入文章标题！" style="width: 800px"/>
      <br/> <br/>
      <h2>内容：</h2>

      <quill-editor ref="myTextEditor"
                    v-model="content"
                    :config="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)"
      >
      </quill-editor>
      <br/>
      <br/>
      <Button type="primary" @click="fabu">发布</Button>
    </div>

  </div>
</template>

<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
import {quillEditor} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// editor option example:

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}], // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
  [{'direction': 'rtl'}], // text direction

  [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}], // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['clean'], // remove formatting button
  ['link', 'image', 'video']

]
export default {
  data () {
    return {
      nvalue: '',
      content: `<h2>I am Example</h2>`,
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              'image': function (value) {
                console.log(2)
                if (value) {
                  alert('自定义图片')
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },

  // if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
  // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
  methods: {
    async onUploadHandler(e) {
      console.log(e,2)
      const imageUrl = '上传七牛云后返回来的一串在线链接'

     /* // 获取光标所在位置
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection().index
      // 插入图片
      quill.insertEmbed(length, 'image', imageUrl)
      // 调整光标到最后
      quill.setSelection(length + 1)
      // this.content += url*/
    },

    fabu () {
      if (this.nvalue !== '') {
        this.$axios.post('/api/article/addtext', {
          name: this.nvalue,
          content: this.content,
          id: this.$store.state.userInfo.name
        }).then(res => {
          if (res.data.code == 200) {
            this.$Message.error('提交成功')
            this.$router.push('/')
          }
        })
      } else {
        this.$Message.error('亲输入标题')
      }
    },
    onEditorBlur (editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus (editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady (editor) {
      console.log('editor ready!', editor)
    },
    onEditorChange ({editor, html, text}) {
      // console.log('editor change!', editor, html, text)
      this.content = html
    }
  },
  // if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
  // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
  computed: {
    ...mapState(['userInfo']),
    editor () {
      return this.$refs.myTextEditor.quillEditor
    }
  },
  mounted () {
    // you can use current editor object to do something(editor methods)
    console.log('this is my editor', this.editor)
    // this.editor to do something...
  },
  components: {
    quillEditor
  }
}
</script>

<style scoped>

</style>
